<template>
  <div>
    <van-tabs v-model="activeName"  color="cornflowerblue" line-height="1px" title-active-color="cornflowerblue" >
<!--      <van-tab title="这里什么都没有">-->
<!--        <van-image-->
<!--            width="100%"-->
<!--            height="100%"-->
<!--            src="http://192.168.0.106:8080/res/default/0.png"-->
<!--        />-->

<!--      </van-tab>-->
      <van-tab title="影院">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image, index) in imgs" :key="index">
            <van-image  :src="image" />
          </van-swipe-item>
        </van-swipe>
        <van-cell-group>
          <van-cell v-for="item in cinemaList" :key="item.cinemaId" :title="item.cinemaName" @click="toHallPage(item.cinemaId)">
            <template #label>
              <van-row>
                <span>{{ item.cinemaAddress }}</span>
              </van-row>
              <van-tag style="margin-left: 1px" color="#7232dd" plain>IMAX</van-tag>
              <van-tag style="margin-left: 1px" color="#7232dd" plain>3D</van-tag>
            </template>
            <van-row>
            <span>
              {{item.cinemaTel}}
            </span>
            </van-row>
            <span>{{item.cinemaTransport}}</span>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
    <MyFooter></MyFooter>
  </div>

</template>

<script>
import {getAllCinema} from "@/api/movie";
import MyFooter from "@/views/layout/MyFooter";

export default {
  name: "user",
  components: {MyFooter},
  props:['movieId'],
  mounted() {

  },
  beforeRouteEnter (to,from,next) {
    getAllCinema()
        .then((res)=>{
          console.log(res)
          next(vm =>vm.setCinemaList(res.data))
        })
  },
  data() {
    return {
      activeName: 1,
      searchValue:'',
      cinemaList:[],
      imgs:[require('../assets/img/7.jpg'),require('../assets/img/8.jpg'),require('../assets/img/9.jpg')]
    }
  },
  methods: {
    setCinemaList(data){
      console.log(data)
      this.cinemaList = data
    },
    toHallPage(cid){
      console.log(this.movieId)
      if (this.$route.path!='/hall'){
        if (typeof (this.movieId)==='undefined'){
          this.$router.push(`/hall?cid=${cid}`)
        }else {
          this.$router.push(`/hall?mid=${this.movieId}&cid=${cid}`)
        }

      }
    }
  },

}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 175px;
}
</style>
